<template>

  <div class="onediv">
    <div class="towdiv">
      <div v-for="(coudata,i) in courseData " :key="i" class="coursebox" @click="CourseDetails()">
        <img :src="coudata.courseCover" width="100%" height="70%" alt="">
        <div style="width: 100%;height: 30%; margin-top: -2%; background-color: white;">
          <h3 class="title">{{ coudata.courseName }}</h3>
          <br>
          <div style="padding: 2% 0 0 3%;">
            <p style="color: black;float: left; margin-top: 2%;"><i class="el-icon-user"></i> 1251人以学习</p>
            <div class="labelbox">观看</div>
          </div>
        </div>
        <div class="slidebox">
          <img style="width: 30%;" src="../../../../assets/img/paly.png" alt="">
          <div class="slideboxdiv">
            <p>{{ coudata.courseInformation }}</p>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      courseData: [ ],
      multipleSelection: []
    }
  },
  mounted() {
    var that = this
    axios({
      method: 'get',
      url: 'api/Course',
    }).then(function (res) {
      console.log(res.data)
      that.courseData = res.data
      console.log(that.courseData)
    })
  },
  methods: {}
}
</script>

<style>
.onediv {
  width: 100vw;
  height: 90vh;
  padding-top: 4vh;
  background-color: #F4F5F9;
}

.towdiv {
  width: 80vw;
  height: 100%;
  background-color: white;
  /* display: block; */
}

.coursebox {
  width: 14vw;
  height: 25vh;
  margin-right: 1vw;
  border-radius: 10%;
  margin-top: 2%;
  overflow: hidden;
}

.title {
  color: black;
  float: left;
  margin-left: 5%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slidebox {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  position: absolute;
  top: 100%;
  transition: top 0.25s ease;
}

.coursebox:hover .slidebox {
  top: 0%;
}

.labelbox {
  background-color: #68cb9b;
  width: 25%;
  height: 3vh;
  margin-right: 5%;
  border-radius: 10px;
  color: white;
  float: right;
}

.slideboxdiv {
  background-color: white;
  width: 100%;
  height: 55%;
  margin-top: 7%;
}

.slidebox p {
  font-size: 13px;
  padding: 5% 5% 5% 5%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
</style>